专为Element UI搭配的富文本编辑器 |
您所在的位置：网站首页 › elementui 富文本 › 专为Element UI搭配的富文本编辑器 |
专为Element UI搭配的富文本编辑器
|
大家好，我是前端实验室的大师兄！ 今天大师兄给大家推荐一款专为Element UI搭配的编辑器：Element Tiptap Editor。  关于 Element Tiptap EditorElement Tiptap Editor 是一个在 web 开发领域“所见即所得”的富文本编辑器。 它基于 tiptap 编辑器和 element-ui 开发，相比很多富文本编辑器，Element Tiptap Editor 使用易上手，对开发者友好，而且可扩展性强，设计简洁。  Element Tiptap Editor 技术特性 🎨 操作按钮等组件使用 element-ui 组件，整体样式协调美观💅 有许多开箱即用的 extension（编辑器扩展）🔖 支持 markdown 语法📘 支持TypeScript 支持🌐 支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he)🎈 可用的 events: init, transaction, focus, blur, paste, drop, update🍀 高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图💻 操作灵活，可以通过直接控制编辑器的行为来定制编辑器。👏 提供中文文档 安装使用Element Tiptap Editor 的官网很简洁，风格传承 Tiptap 1.x 版本，功能演示即代码，非常简单易懂。 安装 Element Tiptap Editor // 使用 yarn yarn add element-tiptap // 使用 npm npm install --save element-tiptap在 Vue 中全局注册 import Vue from 'vue'; import ElementUI from 'element-ui'; import { ElementTiptapPlugin } from 'element-tiptap'; // 引入 ElementUI 样式 import 'element-ui/lib/theme-chalk/index.css'; // import element-tiptap 样式 import 'element-tiptap/lib/index.css'; // 安装 ElementUI 插件 Vue.use(ElementUI); // 安装 element-tiptap 插件 Vue.use(ElementTiptapPlugin, { /* 插件配置项 */ });当然也可以局部引入 import { ElementTiptap } from 'element-tiptap'; export default { components: { 'el-tiptap': ElementTiptap, }, };富文本的操作菜单有很多，最简单的使用方法就是：按需传入。  只要按顺序把需要用到的功能罗列出来，传入组件，就完成了编辑器的搭建： import { // 罗列出需要的功能按钮 Doc, Text, Paragraph, Heading, Bold, Underline, Italic, Strike, ListItem, BulletList, OrderedList, } from 'element-tiptap'; export default { data () { return { // 按照罗列的顺序被添加到菜单栏和气泡菜单中 extensions: [ new Doc(), new Text(), new Paragraph(), new Heading({ level: 5 }), // 支持多级标题，设置为5级 new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮 new Underline({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮 new Italic(), new Strike(), new ListItem(), new BulletList(), new OrderedList(), ], // 编辑器的内容 content: ` HeadingThis Editor is awesome! `, }; }, },一个简单具备编辑功能的富文本编辑器就完成了。 扩展内置的功能都是基础的文字排版，如果要实现较为复杂的功能，比如插入特定结构或格式的内容（插入一篇文章的封面和摘要），就需要根据 Tiptap 提供的事件来处理。 比如，Init事件。 export default { ... methods: { /* * tiptap editor 实例 */ onInit ({ editor }) { // 做你初始化想做的事。 }, }, },Element Tiptap Editor 还可以自定义扩展菜单功能。更多详细内容请查阅官方文档。 地址 https://github.com/Leecason/element-tiptap 写在最后欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~ 进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。 如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~ |
【本文地址】
今日新闻 |
推荐新闻 |